<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>动画-案例《手风琴》</title>
</head>

<body>
  <div id="box">
    <input type="text" placeholder="请输入搜索内容" v-model="value" @input="onInput">
    <br>
  </div>
  <script src="./vue.js"></script>
  <script>
    let app = new Vue({
      el: '#box',
      data: {
        value: '',
        timeID: null
      },
      methods: {
        onInput() {
          //1.每一次触发事件，先清除上一次定时器。以本次为准
          clearTimeout(this.timeID)
          //2.开启定时器间隔0.5s执行（防抖间隔）
          this.timeID = setTimeout(() => {
            console.log(this.value);
          }, 500)
        }
      },
    })
  </script>
</body>

</html>